<template>
    <div class="r_main">
        <div class="tabIn">
            <div class="tab">
                提现
            </div>
        </div>
        <div class="form_con">
            <div class="outer">
                <p>余额提现</p>
                <el-form style="width: 60%;" ref="form" :model="form" label-width="7.81vw">
                    <el-form-item label="当前手续费:">
                        <strong>{{ scale }}%</strong>

                    </el-form-item>
                    <el-form-item label="提现方式:">
                        <el-radio-group v-model="form.op">
                            <el-radio :label="1">微信提现</el-radio>
                            <el-radio :label="2">银行卡提现</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="可提现余额:">
                        <strong>{{ userInfo.balance }}</strong>
                    </el-form-item>
                    <el-form-item label="本次提现:">
                        <div style="display: flex;width: 50%;">
                            <el-input v-model="form.money" @blur="getNums" type="number"></el-input>
                            <el-button type="danger" plain @click="allIN">全部兑换</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="预计到账:">
                        <strong>{{ balance }}</strong>
                    </el-form-item>
                    <el-form-item v-if="form.op == 2" label="账户姓名:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item v-if="form.op == 2" label="银行卡号:">
                        <el-input v-model="form.bankno"></el-input>
                    </el-form-item>
                    <el-form-item v-if="form.op == 2" label="开户行:">
                        <el-input v-model="form.bankname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="btns">
                            <el-button type="danger" @click="onSubmit">确认提现</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

</template>
<script>
export default {
    data() {
        return {
            form: {
                money: '',
                bankname: '',
                op: 1,
                name: '',
                bankno: '',
            },
            userInfo: {},
            fee: 0,
            balance: 0,
            scale: 0

        }
    },
    computed: {
        path() {
            return this.$route.path
        }
    },
    mounted() {

        this.getUinfo()
        this.getOption()

    },

    methods: {
        getOption() {
            let params = {
                type: 'fee_scale'
            }
            this.$api.getOptions(params).then(res => {
                let response = res.data.data
                if (res.data.code == 1) {
                    if (res.data.data.fee_scale) {
                        this.scale = response.fee_scale
                    }

                }
            })
        },
        getNums(e) {
            console.log('本次提现', this.form.money)
            console.log('用户余额', this.userInfo.balance)
            if (parseFloat(this.form.money) > parseFloat(this.userInfo.balance)) {
                this.$message({
                    type: 'error',
                    message: '请重新输入提现余额!'
                });
                return false
            }

            let sxf = this.form.money * this.scale / 100
            let balance = this.form.money - sxf
            this.balance = balance.toFixed(2);
        },
        allIN() {
            this.form.money = this.userInfo.balance
            this.getNums()
        },

        getUinfo() {
            this.$api.getUserInfo().then(res => {
                if (res.data.code == 1) {
                    this.userInfo = res.data.data
                }
            })
        },

        confirm(item) {
            console.log(item);

        },
        onSubmit() {
            let params = this.form
            this.$api.addWithdraw(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.getUinfo()
                    this.form.op = 1
                    this.form.money = ''
                    this.form.bankname = ''
                    this.form.bankno = ''
                    this.form.name = ''
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.r_main {
    width: 100%;


    .tabIn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 23px 0;
        background-color: #E5E5E5;
        position: sticky;
        top: 99px;
        z-index: 99;
        padding: 0 23px;
        height: 60px;

        // border-top: 0.05rem solid #E8E8E8;
        .tab {
            font-weight: bold;
            font-size: 24px;
            color: #1068E7;
        }

        .btn2 {
            cursor: pointer;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            width: 82px;
            text-align: center;
            line-height: 34px;
            height: 34px;
            background: #1068E7;
            border-radius: 17px;
        }

    }

    .form_con {
        min-height: 500px;
        // overflow-y: auto;
    }
}

.outer {
    margin-top: 30px;
    display: flex;
    align-items: flex-start;
    padding-bottom: 20px;
    padding: 0 80px 20px;
    flex-direction: column;

    >p {
        margin-top: 20px;
        font-size: 22px;
        font-weight: bold;
    }
}
@media screen and (max-width:768px) {
    .r_main .tabIn{
        height: 40px;
        padding: 0 20px;
        .tab{
            font-size: 15px;
        }
    }
    .outer{
        p{
            font-size: 15px;
        }
        .el-form{
            border: 1px solid #ccc;
            border-radius: 10px;
            width: 100% !important;
            padding: 10px;
            ::v-deep .el-form-item__label{
                width: auto !important;
             }
            button{
                font-size: 12px;
            }
        }
    }
    .el-form-item__content .btns .el-button {
        width: 100px;
        height: 30px;
        line-height: normal;
    }
    }
</style>